课程资源与开发环境准备
课程资源清单
核心学习资料
视频教程
- 高清录制的教学视频，支持0.5x-2x倍速播放
- 每章视频时长：1-3.5小时，总计40-50小时
- 支持移动端学习（iOS/Android App）
- 字幕文件：中英文双语字幕
课程笔记
- 每章节的详细文字笔记（Markdown格式）
- 代码示例：完整的可运行代码
- 思维导图：章节知识结构图
- 补充阅读：扩展学习资源链接
项目源码
- 完整的Vue 3组件库项目源代码
- 分阶段代码：每个章节的代码快照
- 配置文件：完整的工程化配置
- 部署脚本：CI/CD配置示例
实战案例
- 多个AI前端开发的实际应用案例
- 真实项目的架构设计和实现细节
- 常见问题和解决方案总结
- 性能优化实践案例
工具和插件
AI开发工具（课程中使用的）
IDE 类编程助手：
- Cursor 2.0：AI优先代码编辑器（复杂项目首选）
- Windsurf（Codeium）：免费额度慷慨的AI编辑器（预算首选）
- GitHub Copilot：代码补全助手（企业团队首选）
- Qoder（原通义灵码）：阿里云AI编程助手（国内首选，免费）
- 文心快码（Comate）：百度AI编程助手（前端/工程化场景）
- 腾讯CodeBuddy：MCP协议支持，双模型架构（免费）
- Trae 2.0：字节跳动AI原生IDE（免费版 + Pro $10/月，SOLO自主模式）
- CodeGeeX：智谱AI，离线运行，企业安全场景
终端/命令行AI工具：
- Claude Code：Anthropic终端原生AI，200k上下文，多步骤自主执行（课程主力工具，不依赖官方账号，可对接国内 Coding Plan 或本地 Ollama）
全栈生成平台（浏览器即用，无需安装）：
- Bolt.new（StackBlitz）：浏览器内全栈开发，秒级部署
- v0（Vercel）：React/Next.js UI生成，直接部署
- Lovable：自然语言生成全栈应用，MVP首选
VS Code / Cursor 插件清单
{
"recommendations": [
"vue.volar", // Vue Language Features (Volar)
"vue.vscode-typescript-vue-plugin", // TypeScript Vue Plugin (Volar)
"antfu.unocss", // UnoCSS
"antfu.iconify", // Iconify IntelliSense
"bradlc.vscode-tailwindcss", // Tailwind CSS IntelliSense
"esbenp.prettier-vscode", // Prettier - Code formatter
"dbaeumer.vscode-eslint", // ESLint
"streetsidesoftware.code-spell-checker", // Code Spell Checker
"eamodio.gitlens", // GitLens
"usernamehw.errorlens", // Error Lens
"christian-kohler.path-intellisense", // Path Intellisense
"ms-vscode.vscode-typescript-next", // TypeScript Nightly
"bierner.markdown-mermaid", // Markdown Preview Mermaid Support
"yzhang.markdown-all-in-one" // Markdown All in One
]
}
json
UI设计资源
- Figma设计文件和UI Kit（可编辑）
- 图标资源：Iconify图标库集成
- 主题配置：多套主题色彩方案（亮色/暗色）
- 组件设计规范：设计系统文档
参考文档
官方文档
- Vue 3官方文档：cn.vuejs.org
- Vite官方文档：cn.vitejs.dev
- TypeScript官方文档：www.typescriptlang.org
- pnpm官方文档：pnpm.io
AI服务文档
- OpenAI API文档：platform.openai.com/docs
- Anthropic Claude文档：docs.anthropic.com
- 通义千问文档：help.aliyun.com/zh/dashscope
- 文心一言文档：cloud.baidu.com/doc/WENXINWORKSHOP/index.html
最佳实践指南
- AI前端开发最佳实践（课程总结）
- 组件库设计规范
- 提示词工程模板库
- 代码审查清单
问题解答
- 常见问题FAQ（200+问题）
- 错误排查指南
- 性能优化手册
- 安全最佳实践
扩展阅读
- 相关技术文章和论文推荐
- 开源项目分析
- 行业报告和白皮书
AI工具预算方案（2026年最新）
零成本方案（完全免费）推荐学生/初学者
工具组合：
代码编辑器：
├── Cursor（免费 Hobby 档）
│ └── 限量额度池（含 Agent / Tab 基础用量）
│ └── 适合体验核心 AI 功能，重度使用需 Pro（2026-11-07 核实）
│
├── 或通义灵码（个人版）
│ └── 完全免费，不限时长
│ └── 支持200+编程语言
│ └── 中文优化
│
└── VS Code + 开源插件
└── 完全免费
text
AI模型（免费额度）：
- 通义千问：新用户免费额度（通常100万tokens）
- 文心一言：新用户免费额度
- 智谱GLM：新用户免费额度
- DeepSeek：完全免费或低价（$0.14/百万tokens）
成本分析：
- 月度成本：0元
- 年度成本：0元
- 适用场景：学习、个人项目、开源项目
优势：
- ✅ 完全免费，零门槛
- ✅ 国内服务，访问稳定
- ✅ 功能足够学习使用
局限：
- ⚠️ 请求次数有限（Cursor免费版）
- ⚠️ 免费档模型与额度受限（对比付费档）
- ⚠️ 企业级功能缺失
低预算方案（50元/月以内）推荐个人开发者
方案A：Cursor Pro（推荐）
Cursor Pro - $20/月（约144元/月）
└── 无限快请求
└── 优先响应
└── 扩展上下文
└── 内置模型用量额度（约$20）
text
方案B：国产组合（推荐国内用户）
通义灵码企业版 - 79元/月
├── 无限代码生成
├── RAG智能问答
├── 企业级功能
└── 阿里云生态集成
+
文心快码企业版 - 78元/月
├── 多智能体协作
├── 工程规范检查
└── 白盒化开发流程
text
方案C：混合方案（性价比最高）
Cursor 免费版（日常开发）
+
通义灵码企业版（79元/月，作为补充）
=
综合体验最优，成本控制在100元/月以内
text
成本分析：
- 月度成本：79-144元/月
- 年度成本：948-1,728元/年
- 适用场景：专业开发、兼职项目、自由职业者
优势：
- ✅ 无限或大量请求额度
- ✅ 最新的AI模型（Claude / GPT 系旗舰）
- ✅ 企业级功能（代码审查、安全扫描）
- ✅ 优先支持和更新
专业方案（100-200元/月）推荐团队/企业
方案A：双工具组合
Cursor Pro - $20/月（144元）
+
GitHub Copilot - $10/月（72元）
=
216元/月
text
方案B：全栈组合
Cursor Pro - $20/月（144元）
+
通义灵码企业版 - 79元/月
+
AI模型API（按量计费，约50元/月）
=
273元/月
text
方案C：团队版（适合3-5人团队）
Cursor Teams - $40/月/人（288元/人/月）
├── 多人实时协作
├── 集中式管理
├── 高级安全功能
└── 优先技术支持
text
成本分析：
- 月度成本：216-288元/月
- 年度成本：2,592-3,456元/年
- 适用场景：专业团队、创业公司、企业开发
优势：
- ✅ 无限制使用
- ✅ 最强AI模型组合
- ✅ 团队协作功能
- ✅ 企业级支持
AI模型API成本参考（2026年价格）
▌ 国际模型
| 模型 | 价格（输入） | 价格（输出） | 适用场景 |
|---|---|---|---|
| GPT-5.5 | $1.25/百万tokens | $10/百万tokens | 复杂任务、代码生成 |
| GPT-5-mini | $0.50/百万tokens | $0.6/百万tokens | 简单任务、高并发 |
| Claude Sonnet 4.5 | $3/百万tokens | $15/百万tokens | 长文本、代码分析（注意合规） |
| Claude 3 Haiku | $0.25/百万tokens | $1.25/百万tokens | 轻量任务（注意合规） |
▌ 国内模型（推荐首选，访问稳定、性价比高）
| 模型 | 价格（输入） | 价格（输出） | 适用场景 |
|---|---|---|---|
| DeepSeek Flash（V4.1） | $0.14/百万tokens（闲时输入，缓存命中低至¥0.02） | $0.56/百万tokens（闲时输出，高峰翻倍） | 代码+推理，性价比之王（2026-11-07 官网核实） |
| DeepSeek-R1 | $0.55/百万tokens | $2.19/百万tokens | 复杂推理、数学、算法 |
| 通义千问 qwen-turbo | ¥0.8/百万tokens | ¥2/百万tokens | 国内快速响应 |
| 通义千问 qwen-plus | ¥4/百万tokens | ¥12/百万tokens | 长文本+复杂任务 |
| 通义千问 qwen-max | ¥40/百万tokens | ¥120/百万tokens | 高精度场景 |
| 文心 ERNIE-4.0 | ¥1.2/百万tokens | ¥2.4/百万tokens | 中文语义深度场景 |
| Kimi moonshot-v1 系列（8k-128k） | ¥2/百万tokens起（8k档输入，2026-11 核实降价） | 详见官网（同步下调） | 短对话到128k长文档 |
| 智谱 GLM-5.3（旗舰） | ¥8/百万tokens | ¥28/百万tokens（缓存命中¥2） | 开源底座，企业首选（2026-11-07 官网核实） |
| 豆包 doubao-lite | ¥0.3/百万tokens | ¥0.6/百万tokens | 极低成本高并发 |
| 豆包 doubao-pro | ¥0.8/百万tokens | ¥2/百万tokens | 高质量中文对话 |
| MiniMax abab6.5s | ¥1/百万tokens | ¥1/百万tokens | 超长上下文（1M tokens） |
| 讯飞星火 Lite | 免费 | 免费 | 日常测试场景 |
| 讯飞星火 Pro | ¥3.6/百万tokens | ¥3.6/百万tokens | 语音+文字混合应用 |
成本估算示例（以 DeepSeek Flash 为基准）：
- 轻度使用（每天100次调用）：约3-8元/月
- 中度使用（每天500次调用）：约15-40元/月
- 重度使用（每天2000次调用）：约50-150元/月
国内模型相比 GPT-4o 的成本优势：
同等场景下成本对比（每百万tokens输入）：
GPT-4o = $2.5 ≈ ¥18
DeepSeek V4-Flash = $0.14 ≈ ¥1 （省94%）
豆包 doubao-pro = ¥0.8 （省96%）
通义千问 turbo = ¥0.8 （省96%）
text
推荐组合策略：
- 日常开发辅助：通义灵码/文心快码 IDE 插件（免费）
- 复杂代码生成：DeepSeek API（成本极低）
- 长文档处理：Kimi API 128k 版（按需付费）
- 生产环境高并发：豆包 doubao-lite（最低成本）
- 语音功能集成：讯飞星火语音 API（有免费额度）
预算方案选择建议
零成本方案：如果你是...
├── 学生（在校）
├── 初学者（刚入门）
├── 开源贡献者
└── 预算有限的学习者
低预算方案：如果你是...
├── 个人开发者（副业）
├── 自由职业者
├── 初级前端工程师（1-2年）
└── 希望提升竞争力的求职者
专业方案：如果你是...
├── 专业团队（3人以上）
├── 创业公司
├── 企业开发部门
└── 需要企业级支持和服务级别协议
text
开发环境配置
基础软件安装
Node.js 环境（2026年最新）
推荐版本：Node.js v24 LTS（Krypton）
# 方法一：官方安装包（推荐新手）
# 下载地址：https://nodejs.org/
# 验证安装
node --version # 应该显示 v24.12.0 或更高版本
npm --version # 应该显示 10.0.0 或更高版本
# 方法二：使用 nvm（推荐有经验的开发者）
# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# 重新加载终端配置
source ~/.bashrc # Linux
source ~/.zshrc # macOS
# 安装并使用 Node.js 24 LTS
nvm install 24
nvm use 24
# 设置为默认版本
nvm alias default 24
bash
Node.js v24 核心特性：
- V8引擎14.1：性能大幅提升，JSON.stringify操作优化
- 内置Uint8Array转换：原生base64转换，无需外部库
- 增强权限模型：
--allow-net标志，更安全的应用部署 - 实验性Web存储API：服务器端键值存储支持
- 便携式编译缓存：更快的模块加载
版本选择建议：
- 生产环境：Node.js v24 LTS（支持至2028年4月）
- 开发测试：Node.js v26（Current，测试最新特性）
- 避免使用：Node.js v18及以下（已停止维护）
pnpm 包管理器（强烈推荐）
为什么选择pnpm？
| 特性 | npm | yarn | pnpm |
|---|---|---|---|
| 安装速度 | 基准 | 快1.5x | 快2-3x ⭐ |
| 磁盘空间 | 高（重复） | 高（重复） | 节省70-90% ⭐ |
| 幽灵依赖 | 有 | 有 | 无 ⭐ |
| Monorepo | v7+支持 | 原生 | 原生+优化 ⭐ |
安装pnpm 11.x+：
# 方法一：使用npm（最简单）
npm install -g pnpm
# 方法二：使用Homebrew（macOS/Linux）
brew install pnpm
# 方法三：使用安装脚本（跨平台）
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 验证安装
pnpm --version # 应该显示 11.x 或更高版本（2026年10月npm最新已到12.x，跟课用11.x+即可）
bash
从npm/yarn迁移到pnpm：
# 1. 删除旧的依赖
rm -rf node_modules package-lock.json # npm
rm -rf node_modules yarn.lock # yarn
# 2. 使用pnpm安装
pnpm install
# 3. （可选）设置npm镜像加速
pnpm config set registry https://registry.npmmirror.com
bash
pnpm核心概念：
- 内容可寻址存储：所有包存储在全局，使用硬链接
- 严格依赖管理：无"幽灵依赖"，避免潜在的依赖冲突
- 高效空间利用：多项目共享同一份依赖副本
Git 版本控制
# 检查Git安装
git --version
# 配置用户信息（首次使用）
git config --global user.name "你的姓名"
git config --global user.email "你的邮箱"
# 配置默认分支名称（推荐）
git config --global init.defaultBranch main
# 配置Git别名（可选）
git config --global alias.co checkout
git config --global alias.br branch
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.visual 'log --graph --oneline --decorate --all'
bash
推荐Git配置（.gitconfig）：
[user]
name = 你的姓名
email = 你的邮箱
[core]
editor = vim
autocrlf = input
fscache = true
[init]
defaultBranch = main
[alias]
co = checkout
br = branch
ci = commit
st = status
unstage = reset HEAD --
last = log -1 HEAD
[push]
default = simple
[pull]
rebase = false
[color]
ui = true
ini
代码编辑器配置
推荐编辑器：Cursor 2.0（首选）
为什么选择Cursor？
| 特性 | Cursor | VS Code + Copilot |
|---|---|---|
| AI集成深度 | 原生AI优先 | 插件集成 |
| 跨文件编辑 | ✅ Ctrl+I | ❌ |
| 多模型支持 | ✅ GPT-4 + Claude | ✅ 仅GPT |
| 上下文窗口 | ✅ 200k tokens | ⚠️ 有限 |
| 语音代码生成 | ✅ | ❌ |
| 价格 | $20/月 | $10/月 |
Cursor安装步骤：
# 方法一：官网下载（推荐）
# 1. 访问 https://cursor.sh
# 2. 下载对应操作系统的安装包
# 3. 安装并启动 Cursor
# 方法二：使用Homebrew（macOS）
brew install --cask cursor
# 方法三：使用命令行（Linux）
# 下载AppImage并添加执行权限
wget https://download.todesktop.com/230313mzl4wves2/cursor-0.2.0-build-230313mzl4wves2-x86_64.AppImage
chmod +x cursor-*.AppImage
./cursor-*.AppImage
bash
Cursor首次配置：
- 登录或注册账号
- 打开Cursor
- 选择"Sign Up"（新用户）或"Sign In"（已有账号）
- 支持GitHub、Google快捷登录
- 配置AI模型
Settings → Models ├── Chat Model: claude-sonnet-4-5（推荐） ├── Composer Model: claude-sonnet-4-5 └── Autocomplete Model: cursor-smalltext - 配置主题
Settings → Appearance ├── Theme: One Dark Pro（推荐） └── Font: JetBrains Mono 或 Fira Codetext
Cursor必装插件：
# 快捷键：Cmd/Ctrl + Shift + X
核心插件：
├── Vue Language Features (Volar)
├── TypeScript Vue Plugin (Volar)
├── UnoCSS
├── Iconify IntelliSense
├── GitLens
├── Prettier - Code formatter
├── ESLint
├── Error Lens
└── Material Icon Theme
text
Cursor核心AI功能：
| 快捷键 | 功能 | 说明 |
|---|---|---|
| Ctrl+K | 内联编辑 | 自然语言描述，AI直接修改代码 |
| Ctrl+L | 聊天模式 | 多轮对话，复杂问题讨论 |
| Ctrl+I | Composer模式 | 跨文件编辑，整个项目修改 |
| Tab | 自动补全 | 实时代码建议 |
| Ctrl+Shift+K | 语音输入 | 语音描述代码需求 |
VS Code 配置（备选方案）
如果使用VS Code，需要安装AI插件：
# 安装VS Code
# macOS
brew install --cask visual-studio-code
# Windows
# 下载安装包：https://code.visualstudio.com/
# Ubuntu/Debian
sudo apt install code
bash
VS Code + AI插件组合：
方案A：GitHub Copilot（国际版）
# 1. 安装GitHub Copilot插件
# 扩展 → 搜索 "GitHub Copilot" → 安装
# 2. 订阅服务
# 访问 https://github.com/features/copilot
# 价格：$10/月（个人版）
# 3. 登录GitHub授权
# 在VS Code中登录GitHub账号
# 完成授权即可使用
bash
方案B：通义灵码（国内版，推荐）
# 1. 安装通义灵码插件
# 扩展 → 搜索 "通义灵码" → 安装
# 2. 登录阿里云账号
# 使用支付宝/淘宝账号快速登录
# 3. 开始使用（完全免费）
bash
方案C：文心快码（百度）
# 1. 安装文心快码插件
# 扩展 → 搜索 "文心快码" → 安装
# 2. 登录百度账号
# 使用百度账号登录
# 3. 开始使用（完全免费）
bash
浏览器和调试工具
推荐浏览器
Chrome / Edge（主要开发和调试）
- 下载：Google Chrome 或 Microsoft Edge
- 版本：最新版本（自动更新）
- 用途：主要开发浏览器、Vue DevTools、Chrome DevTools
Firefox（兼容性测试）
- 下载：Mozilla Firefox
- 用途：跨浏览器测试、Firebug调试
Safari（Mac用户兼容性测试）
- 系统自带，确保是最新版本
- 用途：iOS设备模拟、WebKit引擎测试
浏览器开发者插件
Vue.js devtools（必须安装）
Chrome/Edge:
1. 访问 Chrome Web Store
2. 搜索 "Vue.js devtools"
3. 点击 "添加至 Chrome"
Firefox:
1. 访问 Firefox Add-ons
2. 搜索 "Vue.js devtools"
3. 点击 "添加到 Firefox"
text
其他推荐插件：
- React DevTools：备用调试工具（学习React时）
- Wappalyzer：技术栈检测工具
- ColorZilla：颜色提取工具
- WhatFont：字体识别工具
- Lighthouse：性能评估工具（Chrome内置）
终端配置（提升开发体验）
推荐终端工具
Windows用户：
- Windows Terminal（推荐）：现代化终端，支持多标签
# Microsoft Store 安装 # 或 winget install Microsoft.WindowsTerminalbash - PowerShell 7：跨平台PowerShell
winget install Microsoft.PowerShellbash
macOS用户：
- iTerm2（推荐）：功能强大的终端替代品
brew install --cask iterm2bash - Warp（新兴）：AI驱动的现代化终端
brew install --cask warpbash
Linux用户：
- 默认终端通常已足够
- 可安装 tilix 或 terminator（多窗格终端）
终端增强工具
Oh My Zsh（macOS/Linux）：
# 安装 Oh My Zsh
sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
# 安装常用插件
git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
# 编辑 ~/.zshrc，添加插件
plugins=(git zsh-autosuggestions zsh-syntax-highlighting npm pnpm)
bash
有用的别名（添加到 ~/.zshrc 或 ~/.bashrc）：
# 开发命令别名
alias dev="pnpm dev"
alias build="pnpm build"
alias test="pnpm test"
alias lint="pnpm lint"
alias format="pnpm format"
# Git别名
alias gs="git status"
alias ga="git add"
alias gc="git commit"
alias gp="git push"
alias gl="git pull"
alias gd="git diff"
# 目录导航
alias ..="cd .."
alias ...="cd ../.."
alias ....="cd ../../.."
# 系统命令
alias ll="ls -la"
alias la="ls -A"
alias l="ls -CF"
bash
项目初始化
创建项目目录
# 1. 创建工作目录
mkdir ai-frontend-course
cd ai-frontend-course
# 2. 初始化Git仓库
git init
# 3. 创建基础目录结构
mkdir -p src/{components,views,composables,utils,assets}
mkdir -p public
mkdir -p tests
# 4. 创建.gitignore
cat > .gitignore << 'EOF'
# Dependencies
node_modules
.pnpm-store
# Build outputs
dist
dist-ssr
*.local
# Environment files
.env
.env.local
.env.*.local
# Editor
.vscode/*
!.vscode/extensions.json
!.vscode/settings.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
# OS
.DS_Store
Thumbs.db
# Logs
logs
*.log
npm-debug.log*
pnpm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
# Testing
coverage
.nyc_output
# AI keys (important!)
.env.ai
*.api-key
EOF
bash
环境变量配置
创建 .env 文件（不要提交到Git！）：
# .env
# AI服务配置
OPENAI_API_KEY=sk-your-openai-api-key-here
ANTHROPIC_API_KEY=sk-ant-your-anthropic-api-key-here
AZURE_OPENAI_API_KEY=your-azure-openai-key
GEMINI_API_KEY=AIzaSy-your-gemini-api-key
# 国内AI服务（推荐）
DASHSCOPE_API_KEY=sk-your-dashscope-key # 通义千问
QIANFAN_ACCESS_KEY=your-qianfan-key # 文心一言
BIGMODEL_API_KEY=your-bigmodel-key # 智谱GLM
# 开发环境配置
VITE_DEV_PORT=5173
VITE_API_BASE_URL=http://localhost:3000
VITE_MOCK_API=true
# 构建配置
VITE_BUILD_TARGET=es2015
VITE_BUILD_SOURCEMAP=true
# 功能开关
VITE_ENABLE_AI=true
VITE_ENABLE_ANALYTICS=false
ini
多环境配置：
# .env.development（开发环境）
VITE_DEV_PORT=5173
VITE_API_BASE_URL=http://localhost:3000
VITE_ENABLE_MOCK=true
# .env.production（生产环境）
VITE_API_BASE_URL=https://api.example.com
VITE_ENABLE_MOCK=false
VITE_ENABLE_ANALYTICS=true
# .env.test（测试环境）
VITE_API_BASE_URL=https://test-api.example.com
VITE_ENABLE_MOCK=true
bash
环境变量使用示例：
// src/config/env.ts
export const config = {
apiUrl: import.meta.env.VITE_API_BASE_URL,
devPort: import.meta.env.VITE_DEV_PORT,
enableAI: import.meta.env.VITE_ENABLE_AI === 'true',
openaiKey: import.meta.env.OPENAI_API_KEY,
}
typescript
编辑器配置文件
.vscode/settings.json（VS Code / Cursor 通用）：
{
// 编辑器基础设置
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit",
"source.organizeImports": "explicit"
},
"editor.tabSize": 2,
"editor.insertSpaces": true,
// TypeScript设置
"typescript.preferences.importModuleSpecifier": "relative",
"typescript.tsdk": "node_modules/typescript/lib",
"typescript.enablePromptUseWorkspaceTsdk": true,
// Vue设置
"vue.server.hybridMode": true,
"vue.inlayHints.missingProps": true,
"vue.inlayHints.inlineHandlerLeading": true,
// UnoCSS设置
"unocss.root": "packages/ui",
"unocss.rootColor": "default",
// 文件关联
"files.associations": {
"*.vue": "vue",
"*.md": "markdown"
},
// 排除文件
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true,
"**/node_modules": true,
"**/dist": true
},
// ESLint
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue"
],
// Prettier
"prettier.requireConfig": true,
"prettier.useEditorConfig": true,
// 终端
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.defaultProfile.linux": "zsh",
"terminal.integrated.fontFamily": "JetBrains Mono",
// 其他
"emmet.includeLanguages": {
"vue": "html"
}
}
json
.vscode/extensions.json（推荐插件）：
{
"recommendations": [
"vue.volar",
"vue.vscode-typescript-vue-plugin",
"antfu.unocss",
"antfu.iconify",
"bradlc.vscode-tailwindcss",
"esbenp.prettier-vscode",
"dbaeumer.vscode-eslint",
"streetsidesoftware.code-spell-checker",
"eamodio.gitlens",
"usernamehw.errorlens",
"christian-kohler.path-intellisense"
]
}
json
.editorconfig（统一编辑器配置）：
# https://editorconfig.org
root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
max_line_length = 100
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
[*.{yml,yaml}]
indent_size = 2
[*.{sh,bash}]
end_of_line = lf
[Makefile]
indent_style = tab
ini
AI 工具配置
Cursor AI 配置（2026年最新）
基础设置：
打开Cursor → Settings（Ctrl+,）：
AI Models（模型配置）:
├── Chat Model: claude-sonnet-4-5（推荐）
│ ├── 上下文窗口: 200k tokens
│ ├── 适用场景: 复杂对话、代码分析
│ └── 替代方案: gpt-4o
│
├── Composer Model: claude-sonnet-4-5
│ ├── 自研编码模型（快4倍）
│ ├── 适用场景: 跨文件编辑
│ └── 最大文件数: 支持50+文件
│
└── Autocomplete Model: cursor-small
├── 轻量级模型（低延迟）
└── 适用场景: 实时代码补全
text
AI功能开关：
{
"cursor.ai.enabled": true,
"cursor.composer.enabled": true,
"cursor.autocomplete.enabled": true,
"cursor.chat.enabled": true,
"cursor.voice.enabled": true // 语音代码生成
}
json
提示词模板（自定义）：
创建 .cursorprompts 文件：
// Vue 3组件生成
Generate a Vue 3 component using Composition API with TypeScript.
- Use <script setup lang="ts">
- Include props validation with TypeScript interfaces
- Add emit events for parent communication
- Follow the project's coding style
// 测试用例生成
Generate comprehensive test cases for this Vue component using Vitest.
- Test all props combinations
- Test event emissions
- Test edge cases
- Achieve at least 80% code coverage
// 文档生成
Generate API documentation for this component in Markdown format.
- Include all props with types and defaults
- Document all events with payloads
- Include usage examples
- Add accessibility notes
text
GitHub Copilot 配置
激活步骤（如果使用）：
1. 访问 https://github.com/features/copilot
2. 点击 "Start your free trial"
3. 选择订阅计划:
├── Individual: $10/月
├── Business: $19/月/人
└── Enterprise: $39/月/人
4. 完成支付流程
5. 在VS Code中安装Copilot插件
6. 登录GitHub账号并授权
text
⚠️ 计费模式变更（2026年6月1日生效）：GitHub 官方宣布所有 Copilot 套餐全面转向按 token 消耗的 AI Credits 用量计费，取消原"高级请求（premium requests）"计数方式。每档套餐包含月度 Credits 额度（付费档可加购），按输入/输出/缓存 token 统一计量；过渡期（6-8月）Business 用户每月赠送 30Credits、Enterprise每月70。学生认证用户仍可免费使用。来源：github.blog 官方公告。订阅前建议先在 Settings → Copilot → Usage 下载历史用量报告估算 Credits 消耗。
使用技巧：
// 技巧1：使用详细的注释指导代码生成
// 创建一个可复用的按钮组件，支持以下功能：
// - 不同的尺寸（small, medium, large）
// - 不同的颜色主题
// - 加载状态
// - 禁用状态
// 辅助功能支持（ARIA标签）
const Button = defineComponent({
// Copilot将根据注释生成完整实现
})
// 技巧2：使用函数名和参数提示期望的实现
function calculateTotalPrice(items, discount = 0, taxRate = 0.1) {
// Copilot将理解函数名并生成实现
}
// 技巧3：通过示例代码引导生成模式
// Example: fetchUserData(123)
// .then(user => console.log(user.name))
function fetchUserData(id) {
// Copilot将根据示例生成Promise-based实现
}
javascript
国内AI工具配置
通义灵码（阿里云）- 强烈推荐
安装步骤：
# 方法一：VS Code插件市场安装
1. 打开VS Code/Cursor
2. 打开扩展面板（Cmd/Ctrl + Shift + X）
3. 搜索"通义灵码"
4. 点击"安装"
5. 重启编辑器
# 方法二：命令行安装
code --install-extension alibaba-cloud.tongyi-lingma
bash
首次配置：
1. 打开通义灵码（侧边栏图标）
2. 点击"登录"
3. 选择登录方式：
├── 支付宝扫码（推荐）
├── 手机号登录
└── 淘宝账号登录
4. 授权成功后即可使用
text
核心功能：
| 功能 | 说明 | 快捷键 |
|---|---|---|
| 代码续写 | 实时代码补全 | 自动触发 |
| 代码生成 | 自然语言生成代码 | Ctrl+Shift+L |
| 代码解释 | 解释选中代码 | Ctrl+Shift+E |
| 单元测试 | 自动生成测试用例 | Ctrl+Shift+T |
| 代码优化 | 优化代码质量 | Ctrl+Shift+O |
| 智能问答 | 技术问答（支持RAG） | Ctrl+Shift+Q |
配置优化：
// settings.json
{
"tongyi.lingma.enable": true,
"tongyi.lingma.autoCompletion": true,
"tongyi.lingma.codeExplanation": true,
"tongyi.lingma.language": "zh-CN",
"tongyi.lingma.telemetry": false // 关闭遥测
}
json
文心快码（百度）
安装步骤：
# 安装插件
code --install-extension Baidu.COMATE
# 或在插件市场搜索"文心快码"
bash
核心优势：
- 工程规范：SPEC规范驱动，自动检查代码规范
- 多智能体：Architect、Plan、Zulu多智能体协作
- C++强项：在C++和嵌入式开发中表现优秀
腾讯云代码助手（CodeBuddy）
安装步骤：
# 安装插件
code --install-extension tencent-cloud.code-assistant
# 或在插件市场搜索"腾讯云代码助手"
bash
核心优势：
- MCP协议：国内首个支持MCP的代码助手
- 双模型架构：腾讯混元 + DeepSeek
- Craft智能体：支持20+文件系统工程搭建
Trae（字节跳动）
特点：
- 免费版 + Pro $10/月（积分制，约为 Cursor Pro 半价，常有首月优惠）：免费版即可体验 SOLO 自主模式
- 纯中文界面：对中文注释优化
- SOLO / Builder 模式：零基础创建应用、自主任务拆解
适合人群： 学生、初学者、快速原型开发。注意：简单任务和原型够用，复杂架构项目的能力与国外一线工具仍有差距。
CodeGeeX（智谱AI）
特点：
- 离线运行：完全离线，杜绝代码泄露
- 多语言互译：Python ↔ Java ↔ C++ ↔ JavaScript
- 国产模型：基于智谱GLM，中文语境优秀
适合人群： 敏感项目、金融系统、对数据安全要求高的场景
Windsurf（Codeium）
为什么关注 Windsurf？
Windsurf 是 Codeium 推出的 AI 优先编辑器，与 Cursor 直接竞争，但拥有更慷慨的免费额度：
| 特性 | Windsurf | Cursor |
|---|---|---|
| 免费额度 | 每月200次 Cascade 流 + 无限补全 | 免费 Hobby 档（限量额度池，2026-11-07 核实） |
| Cascade 智能体 | ✅ 多步骤自主编辑 | ✅ Composer |
| 支持模型 | Claude + GPT-4o | Claude + GPT-4o |
| 价格 | 免费 / Pro $20/月 | 免费 / Pro $20/月 |
安装步骤：
# 方法一：官网下载
# 访问 https://codeium.com/windsurf，下载对应系统安装包
# 方法二：使用 Homebrew（macOS）
brew install --cask windsurf
bash
核心功能——Cascade 智能体：
Cascade 模式（Ctrl+L 激活）：
├── 多步骤自主编辑：一句话描述，AI自动跨文件修改
├── 上下文感知：理解整个项目结构
├── 工具调用：可自动运行终端命令
└── 交互确认：执行前展示计划，按需修改
text
推荐使用策略：
- 个人项目 / 预算有限：Windsurf（免费版足够日常使用）
- 需要高级功能：Cursor Pro 或 Windsurf Pro
Claude Code（Anthropic）——课程主力工具完整配置
Claude Code 的独特定位
与其他工具不同，Claude Code 是终端原生工具，不依赖任何 IDE。更关键的是：它本质上是一个底层编码工具（harness）——不强依赖官方 Claude 账号，通过环境变量即可对接第三方模型 API（DeepSeek、通义千问、MiniMax、GLM 等）或本地模型（Ollama）。这也是本课程选它做主力工具的核心原因：工具稳定，底层模型随你切换。
课程为什么选 Claude Code？
- 终端即用，服务器友好：在本地或云服务器上用惯之后，后续开发非常顺手，还能协助调试；同类 CLI 工具（Codex、Antigravity CLI）用法大差不差，学会一个即可触类旁通；
- 上下文窗口大：200k tokens 起步（实际取决于对接的底层模型）；
- 多步骤自主执行：复杂任务自动拆解连续执行。**Team 模式（T 模式）**尤其值得一试——多线程多角色（项目经理、开发、产品、测试）围坐"头脑风暴"，各司其职协作完成复杂任务；
- 典型使用场景：复杂逻辑架构、深度代码审查、CI/CD 集成；
- 不习惯纯终端？ Claude Code 提供官方 VS Code 插件，安装后即可像 Cursor 等 IDE 一样使用会话模式、上传附件。注意：能否上传图片取决于底层模型 API 是否支持多模态（对接不支持多模态的模型时，附件功能不可用）。
💡 用 Codex 等其他 CLI 工具跟课也完全可以——课程的重点在于"开发 + 使用AI辅助工具"的通用能力。但课程讲到 Skills、Agents、提示词预置等 Claude Code 特有机制时，需要你自行研究所用工具（如 Codex 的
AGENTS.md）里的等价配置，卡住了到 Q 群或问答区提问。
安装 Claude Code
# 方式一：npm 安装（对前端同学最友好，本地都有 Node 环境；Windows 首选）
npm install -g @anthropic-ai/claude-code
# 方式二：官方原生安装器（macOS / Linux）
curl -fsSL https://claude.ai/install.sh | bash
# 验证安装
claude --version # 查看当前版本
npm list -g # 顺带查看全局安装的 Claude Code 版本
# 版本过旧时：覆盖安装 latest（课程演示时为 2.1.78）
npm install -g @anthropic-ai/claude-code@latest
bash
Windows 用户直接用 npm 方式，或在 PowerShell / CMD 中执行对应的安装命令即可。
📌 版本节奏说明：Claude Code 近乎日更（录制时 2.1.78，2026年10月 npm 最新已到 2.1.29x）。智谱官方文档表示在 2.1.140 等版本验证 OK，建议保持最新版本以获得完整的第三方端点兼容性。
对接国内模型：Coding Plan 配置实战（以智谱 GLM 为例）
不配置模型直接运行 claude，会要求登录官方 API 账号。对接国内厂商的 Coding Plan（编程套餐） 是更划算的路线：套餐按每5小时/每周循环重置额度计费，一次会话内可包含多轮 API 交互，适合密集编程；API 按量计费则更适合零散测试。
| 套餐 | 厂商 | 价格（2026-11-07 复核仍在售，调价频繁以官网为准） | 额度要点 |
|---|---|---|---|
| GLM Coding Plan | 智谱 | Lite ¥49 / Pro ¥149 / Max ¥469 起 | Pro 约 400 次 prompts/5小时、2000次/周；服务端映射 GLM-5.x；配套 MCP 服务可处理图片文档 |
| Kimi Code | 月之暗面 | Andante ¥49 / Allegretto ¥199 | kimi-k2.x 编程模型，¥199 档约 20 倍额度 |
| MiniMax Coding Plan | MiniMax | Starter ¥29 / Plus ¥49 / Max ¥119（极速版至 ¥469） | minimax-m2.7，Plus 档 1500 次调用/5小时；一个 Key 覆盖文本/图像/语音 |
| 阿里云 Coding Plan | 阿里 | Lite ¥40/月（入门档多次调整） | qwen-3.5-plus，约 1200 次/5小时 |
选型建议（本课程实测口径）：Lite 档额度偏紧（部分先进模型用不上、密集编程不够用），主力开发建议直接上 Pro 档（GLM Pro 约 500 次会话/周期，Kimi、MiniMax 类似）；国内销量与口碑较好的是 MiniMax 和智谱 GLM。课程演示统一使用智谱套餐。拿不准就先买一个月试编码能力。
方式一：Coding Tool Helper 一键配置（推荐）
智谱官方提供了一键安装助手，自动完成工具安装、套餐配置、MCP 服务器管理：
npx @z_ai/coding-helper
bash
按引导依次操作：
- 选择界面语言；
- 选择编码套餐（中国版）；
- 选择"更新 API Key"——助手会给出一个地址，在浏览器打开后进入智谱控制台创建 API Key 并复制，粘贴回终端回车验证；
- 选择编码工具：Claude Code（也支持 Codex、OpenCode、Crush、Factory Droid）；
- 执行"配置刷新"；
- 进入"MCP 配置"逐项回车全部安装（已装过的项目显示为完成状态即可，不用管）；
- "插件市场"入口偶有异常，跳过不影响使用；
- 选择"启动 Claude Code"。
首次启动会询问是否信任当前工作区（macOS 上显示为工作区路径），选择 "Yes, I trust this folder" 即可进入会话状态；若弹出"Do you want to use this API key"，选 Yes。
方式二：官方配置脚本（仅 macOS / Linux）
curl -O "https://cdn.bigmodel.cn/install/claude_code_env.sh" && bash ./claude_code_env.sh
bash
脚本会自动修改 ~/.claude/settings.json 写入环境变量，并在 ~/.claude.json 中补上 "hasCompletedOnboarding": true（跳过官方登录引导）。
方式三：手动配置 settings.json（三平台通用）
编辑（不存在则新建）用户目录下的配置文件：macOS / Linux 为 ~/.claude/settings.json，Windows 为 用户目录/.claude/settings.json。注意保证 JSON 格式正确（不多不少逗号），推荐用 VS Code / Cursor 编辑保存，报格式错误就按提示调整：
{
"env": {
"ANTHROPIC_AUTH_TOKEN": "YOUR_API_KEY",
"ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.7",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-5.2[1m]",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-5.2[1m]",
"CLAUDE_CODE_AUTO_COMPACT_WINDOW": "1000000",
"CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1,
"API_TIMEOUT_MS": "3000000"
}
}
json
同样的变量也可以写进 ~/.zshrc（macOS）等 shell 配置作为系统环境变量，效果一致；Windows 用户则配置为系统环境变量。
环境变量速查：
| 变量 | 作用 |
|---|---|
ANTHROPIC_BASE_URL | API 端点。智谱：https://open.bigmodel.cn/api/anthropic；本地 Ollama：http://localhost:11434 |
ANTHROPIC_AUTH_TOKEN | API Key（Bearer 方式） |
ANTHROPIC_DEFAULT_OPUS_MODEL / ..._SONNET_MODEL / ..._HAIKU_MODEL | Claude Code 三档模型到实际模型的映射，如 glm-5.2[1m]、qwen3.5 |
CLAUDE_CODE_AUTO_COMPACT_WINDOW | 自动压缩上下文的窗口大小（配 1M 上下文时设 1000000） |
API_TIMEOUT_MS | 请求超时（毫秒），默认约10分钟，长任务可调大 |
CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC | 关闭非必要流量（遥测等），对接第三方端点时建议开启 |
💡 GLM 的
[1m]后缀表示开启 1M 上下文（如glm-5.2[1m]），需同时配置CLAUDE_CODE_AUTO_COMPACT_WINDOW。若加后缀后 Claude Code 报模型不存在，升级到最新版重试。
模型选择与服务端映射
启动后在会话中输入 /model 选择模型档位。各 Coding Plan 服务商会把自己最强的模型映射到 Sonnet / Opus 档位——界面上显示的是 Claude 模型名，实际请求的是 GLM/Kimi/MiniMax 模型（默认配置下 Opus/Sonnet/Haiku 均映射到同一档）。选择建议：
- Haiku：响应快，但能力相对弱，适合轻量任务；
- Sonnet：综合能力最强性价比档，日常主力推荐；
- Opus：能力最强但思考时间更长，留给硬骨头任务。
其他实用命令：/status 确认当前模型与连接状态；/effort 切换思考强度（智谱 GLM-5.2 会将 high 以上映射为 max effort，编码任务推荐切到 max，推理更深更稳）。
终端交互速记（会话中输入）：
? 查看帮助与全部用法
! 进入 bash 模式，直接执行命令
/ 快捷指令（/model、/status、/effort 等）
@ 引用指定文件（如 @src/App.vue）
& 查看后台正在运行的进程
text
配置不生效排查：关闭所有 Claude Code 窗口，重新开一个终端再运行 claude；仍不行则删除 ~/.claude/settings.json 重新配置（会自动重新生成）；最后检查 JSON 格式（逗号多寡）。
对接本地模型：Ollama 安装与配置
为什么需要本地模型：一是离线场景（内网/出差，不方便用第三方 API）；二是隐私保护（代码不出本机）。
工具选型：个人使用推荐 Ollama 或 LM Studio（简单易上手）；Ollama 底层用 C 实现，并发特性也不错；公司内部高性能高并发场景则应考虑 vLLM 这类推理框架（第19章内网实战会展开）。
第一步：安装 Ollama
# 访问 https://ollama.com，点击 Download，选择对应平台（Windows / macOS / Linux）
# 复制官方安装命令，在终端中粘贴执行，例如 macOS / Linux：
curl -fsSL https://ollama.com/install.sh | sh
# 国内下载慢时：配置代理，或使用第三方镜像源；群内也提供安装资源
bash
安装完成后终端提示 install complete，应用程序列表会出现 Ollama 图标（一只羊驼），双击打开即可在图形界面选模型对话。
第二步：拉取模型（推荐 Qwen3.5 系列）
通义千问 Qwen3.5（2026年2月开源）是目前本地编码能力最强的开源系列之一，多模态（视觉语言融合）、支持 thinking 思考模式，能力和速度比较均衡。按显存选规模：
| 显存 | 推荐模型 | 说明 |
|---|---|---|
| 8GB | qwen3.5:9b | 入门口径；若觉智力不足，考虑升级硬件 |
| 16GB+ | qwen3.5:27b | 复杂任务更稳，需较好的显卡或大统一内存机器 |
| 体验/演示 | qwen3.5:4b | 仅约 3.4GB，课程演示用 |
# 拉取模型（演示用 4B；Ollama 库提供 0.8b/2b/4b/9b/27b/35b/122b 全系标签）
ollama pull qwen3.5:4b
# 验证方式一：命令行直接对话
ollama run qwen3.5:4b "介绍一下你自己"
# 验证方式二：打开 Ollama 桌面应用，下拉框选中模型对话
bash
首次加载较慢，后续输出会明显变快。Qwen3.5 是思考型模型，回答前会先展示 thinking 思考过程再输出正式内容；本地推理会把 GPU 跑满（演示机 93-94% 占用），属正常现象。
第三步：验证 API 服务并配置 Claude Code
Ollama 桌面服务启动后，API 默认监听 11434 端口（桌面版启动即开启，无需手动 ollama serve；命令行场景用 ollama serve 显式启动）：
# 浏览器访问 http://localhost:11434 确认服务在线
# 访问 http://localhost:11434/api/tags 查看已安装模型列表（记下模型名）
bash
然后把 ~/.claude/settings.json 的 env 改为本地端点（模型名必须与 /api/tags 返回的完全一致，token 可留空）：
{
"env": {
"ANTHROPIC_BASE_URL": "http://localhost:11434",
"ANTHROPIC_DEFAULT_OPUS_MODEL": "qwen3.5",
"ANTHROPIC_DEFAULT_SONNET_MODEL": "qwen3.5",
"ANTHROPIC_DEFAULT_HAIKU_MODEL": "qwen3.5"
}
}
json
保存后新开终端运行 claude，问一句"介绍一下你自己"或"说出一个四字成语"验证响应。
🧪 一个有趣的现象：问本地模型"你是谁"，它不会说自己是千问3.5，而是回答"我是 Claude Code，官方 CLI 工具…"——这是 Claude Code 注入的系统预置提示词在起作用。想亲眼看完整的系统提示词，可以在本地装一个请求拦截工具（如抓包代理），截获 Claude Code 发往
localhost:11434的请求体即可。
⚠️ 本地模型的速度现实：本地推理非常吃硬件——演示机跑一个简单任务输出耗时近一两分钟、GPU 满载。这个速度会明显打断你的思考节奏和开发进度。追求效率请优先用线上 API/Coding Plan，本地模型留给离线与隐私场景。除 Ollama 外，其他本地推理服务（LM Studio 等）同理可接。
核心使用模式：
# 交互模式——最常用
claude
# 进入对话后，可以直接描述任务：
# "帮我创建一个 Vue 3 组件，包含表单验证和提交处理"
# 一次性任务（适合 CI/CD 集成）
claude -p "分析 src 目录，给出代码质量报告"
# 指定文件处理
claude -p "优化这个组件的性能" --file src/components/Button.vue
bash
与其他工具的搭配建议：
日常开发 → Cursor / Windsurf（IDE内操作）
复杂重构 → Claude Code（理解大型代码库）
CI/CD → Claude Code（命令行自动化）
代码审查 → Claude Code（深度分析报告）
text
成本控制：
- 官方 API 路线：使用 Claude Sonnet 4.5 模型（比 Opus 便宜10倍），轻度使用（每日5-10次任务）约 $20-50/月
- 国内路线：GLM/Kimi/MiniMax Coding Plan，¥49-199/月封顶，密集编程比按量 API 划算
- 零成本路线：本地 Ollama + Qwen3.5（代价是速度）
- 推荐配合 API 密钥的用量预警功能
⚠️ 国内用户注意：Claude 官方服务使用前请了解合规要求。上面的 Coding Plan 与 Ollama 配置即为国内合规替代路线。另外，Cursor、腾讯 CodeBuddy 等工具的类似接入方式需要对应厂商的订阅才能使用。
Codex CLI（OpenAI）
Codex CLI 的定位
OpenAI 官方出品的开源命令行编程代理，在 GitHub 发布后迅速成为热门项目。与 Claude Code 相比，Codex CLI 更注重用户控制和可定制性，支持通过 Markdown 文件配置个性化工作流，并内置沙箱安全执行模式。
安装步骤：
# 安装（需要 Node.js 18+）
npm install -g @openai/codex
# 验证安装
codex --version
# 配置 API 密钥
export OPENAI_API_KEY="sk-your-key-here"
# 启动交互模式
codex
bash
三种安全执行模式：
# 建议模式（默认）：只建议，不自动执行
codex
# 自动编辑模式：自动修改文件，但执行命令前询问
codex --approval-mode auto-edit
# 完全自动模式（谨慎使用）：全自主执行
codex --approval-mode full-auto "重构 src/components 下的所有 Vue 组件，统一使用 Composition API"
bash
核心使用场景：
# 理解项目结构
codex "解释这个项目的架构，重点说明数据流向"
# 自动生成代码
codex "为 UserList 组件添加分页功能，每页20条"
# 自动写测试
codex "为 src/utils/validator.ts 生成完整的 Vitest 单元测试"
# 代码审查
codex "审查 src/api 目录下的所有文件，找出潜在的安全问题"
# 批量重构
codex --approval-mode auto-edit "将项目中所有 Options API 组件改为 Composition API"
bash
自定义配置（AGENTS.md / .codex/instructions.md）：
# 在项目根目录创建 AGENTS.md
## 项目规范
- 所有 Vue 组件使用 <script setup lang="ts">
- 样式使用 Tailwind CSS，不要写内联样式
- 函数命名使用 camelCase，组件文件名使用 PascalCase
- 单元测试覆盖率要求 > 80%
## 禁止操作
- 不要修改 dist 目录
- 不要删除 .env 文件
markdown
Codex 会在执行任务时自动读取此文件，遵循项目规范。
CI/CD 集成示例（GitHub Actions）：
# .github/workflows/ai-review.yml
name: AI Code Review
on: [pull_request]
jobs:
review:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Run Codex Review
env:
OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
run: |
npm install -g @openai/codex
codex --approval-mode suggest \
"审查本次 PR 的代码变更，输出：1.潜在Bug 2.性能问题 3.改进建议"
yaml
成本控制：
- 使用
gpt-4o-mini模型（比gpt-4o便宜20倍）：codex --model gpt-4o-mini - 轻度使用（每日10次任务）：约 $5-15/月
- 重度使用（集成 CI/CD）：约 $30-80/月
Gemini CLI（Google）
Gemini CLI 的定位
Google 官方出品的开源 AI 终端工具，2025年6月25日发布，5天内 GitHub Stars 突破 4 万颗。最大亮点：完全免费 —— 使用个人 Google 账号即可获得每天 1000 次请求、每分钟 60 次的免费额度，模型使用 Gemini 2.5 Pro / Gemini 3。
安装步骤：
# 安装（需要 Node.js 20+）
npm install -g @google/gemini-cli
# 验证安装
gemini --version
# 首次启动（会自动引导 Google 账号授权）
gemini
# 或使用 API Key（可解锁更高配额）
export GEMINI_API_KEY="AIzaSy-your-key-here"
gemini
bash
免费额度（Google 账号登录，无需 API Key）：
免费额度：
├── 每分钟：60 次请求
├── 每天：1,000 次请求
├── 上下文：1M tokens（可放入整个前端项目的所有代码）
└── 模型：Gemini 2.5 Pro（付费版为 Gemini 3）
付费（API Key / Gemini Advanced $19.99/月）：
├── 更高请求限额
└── 2M tokens 超长上下文
text
核心使用场景：
# 超大代码库分析（1M 上下文的杀手锏）
gemini "分析整个 src 目录的代码质量，生成详细报告"
# 全项目重构规划
gemini "阅读所有源码，设计一个将项目从 Vue 2 迁移到 Vue 3 的完整方案"
# 工程审计
gemini "检查所有组件的可访问性（a11y）问题，按优先级排列"
# 自动生成文档
gemini "为所有 composables 生成 JSDoc 文档注释"
# 管道操作（Unix 哲学）
cat src/components/Button.vue | gemini "优化这个组件的性能"
git diff HEAD~1 | gemini "分析本次代码变更，生成 PR 描述"
bash
与其他工具配合（多 CLI 协同工作流）：
# 用 Gemini CLI 做全局分析（1M 上下文），用 Claude Code 做精细重构
gemini "分析整个项目，找出最需要重构的10个文件，说明原因" > refactor_plan.md
claude "按照 refactor_plan.md 中的计划，重构优先级最高的3个文件"
# 用 Gemini CLI 生成测试计划，用 Codex CLI 执行
gemini "为 src/utils 目录制定完整的单元测试计划" > test_plan.md
codex --approval-mode auto-edit "按照 test_plan.md 实现所有测试用例"
bash
CI/CD 集成（免费额度适合开源项目）：
# .github/workflows/gemini-docs.yml
name: Auto Generate Docs
on:
push:
branches: [main]
jobs:
docs:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Generate API Docs
env:
GEMINI_API_KEY: ${{ secrets.GEMINI_API_KEY }}
run: |
npm install -g @google/gemini-cli
gemini "为所有 TypeScript 接口和函数生成完整的 API 文档，输出 Markdown 格式" \
> docs/api-reference.md
yaml
CLI 工具综合对比与选型指南
三款工具核心对比：
| 对比维度 | Claude Code | Codex CLI | Gemini CLI |
|---|---|---|---|
| 厂商 | Anthropic | OpenAI | |
| 开源 | ❌ 闭源 | ✅ 开源 | ✅ 开源（Apache 2.0） |
| 免费额度 | 无官方免费额度（可接国内Coding Plan ¥29起或本地Ollama零成本） | 有限免费额度 | 每天1000次完全免费 |
| 上下文 | 200k tokens | 128k tokens | 1M+ tokens |
| 代码质量 | ⭐⭐⭐⭐⭐ 逻辑重构最强 | ⭐⭐⭐⭐ 生成稳定快 | ⭐⭐⭐⭐ 工程审计强 |
| 速度 | 较慢（约7s/百行） | 中等（约5s/百行） | 最快（约3s/百行） |
| 自定义 | 中 | ⭐⭐⭐⭐⭐ 最强 | 中 |
| CI/CD适合度 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐（免费额度限制） |
| 月成本估算 | $20-80（或国内套餐¥49-199） | $5-50 | $0（免费） |
| 国内可用性 | 官方需合规渠道；可直连国内Coding Plan或Ollama | 需合规渠道（DeepSeek等国内端点可接） | 需合规渠道 |
场景化选型建议：
按任务类型选择：
├── 复杂逻辑重构、代码审查 → Claude Code（质量最高）
├── 超大代码库全局分析 → Gemini CLI（1M上下文）
├── 自动化工作流、CI/CD集成 → Codex CLI（可定制性最强）
├── 预算为零、免费重度用户 → Gemini CLI（每天1000次免费）
└── 快速日常任务 → Codex CLI / Gemini CLI
按使用频率选择：
├── 每天 < 10次任务 → 任意工具，优先 Gemini CLI（免费）
├── 每天 10-50次任务 → Codex CLI（成本低）
├── 每天 50次+ → 订阅制（Claude Max / ChatGPT Pro）
└── CI/CD 自动化（无人值守） → Codex CLI（完全自主模式）
text
"四位一体"组合拳（2026年主流工作流）：
日常 IDE 编码 → Cursor / Windsurf（编辑器内实时补全）
复杂任务重构 → Claude Code（终端，深度分析）
代码库全局审计 → Gemini CLI（超长上下文一次性输入）
自动化 CI/CD → Codex CLI（开源可控，流水线集成）
快速原型验证 → Bolt.new / v0（浏览器即用，无需安装）
text
更新后的 .env 模板（含 CLI 工具所需 API Key）：
# CLI 工具相关
OPENAI_API_KEY=sk-your-openai-key # Codex CLI
ANTHROPIC_API_KEY=sk-ant-your-key # Claude Code 官方 API（注意合规）
GEMINI_API_KEY=AIzaSy-your-gemini-key # Gemini CLI（可选，有免费额度）
# Claude Code 对接第三方端点（推荐国内路线，也可写入 ~/.claude/settings.json）
ANTHROPIC_BASE_URL=https://open.bigmodel.cn/api/anthropic # 智谱 GLM；本地模型改为 http://localhost:11434
ANTHROPIC_AUTH_TOKEN=your-bigmodel-key # Coding Plan 的 API Key
ini
全栈AI生成平台（Bolt.new / v0 / Lovable）
使用场景：快速原型验证，无需本地安装
Bolt.new（StackBlitz）
访问：bolt.new
特点：
├── 浏览器内完整 Node.js 环境
├── 支持 Vue / React / Next.js / Vite
├── 一句话描述，生成完整可运行项目
├── 支持直接部署到 StackBlitz 或 Netlify
└── 付费版支持更长上下文和更多请求
text
实战用法：
Bolt.new 提示词示例：
"创建一个 Vue 3 + Vite 的待办事项应用，
使用 Tailwind CSS，包含增删改查功能和本地存储，
界面简洁美观"
→ 30秒内生成完整项目，包含：
- Vue 组件文件
- Tailwind 配置
- package.json
- 完整的业务逻辑
text
v0（Vercel）
访问：v0.dev
特点：
├── 专注 React / Next.js UI 生成
├── 输出直接可用的 shadcn/ui 组件代码
├── 支持图片描述转代码（截图即生成）
└── 生成代码质量高，适合直接复制到正式项目
text
Vue 开发者使用技巧： v0 生成 React 代码后，可以让 Cursor 帮你转换为 Vue 3 Composition API 写法，通常只需2分钟。
Lovable
访问：lovable.dev
特点：
├── 全栈生成（含后端逻辑 + 数据库）
├── 自然语言描述产品，AI 完整实现
├── 内置认证、存储等基础功能
└── 适合非开发者快速构建 MVP
text
AI 服务 API 配置
OpenAI API（国际版）
# 1. 访问 https://platform.openai.com
# 2. 注册账户（需要国外手机号验证）
# 3. 进入 API Keys 页面
# 4. 创建新的API Key
# 5. 配置环境变量
export OPENAI_API_KEY="sk-your-key-here"
# 6. 测试API连接
curl https://api.openai.com/v1/models \
-H "Authorization: Bearer $OPENAI_API_KEY"
bash
成本预估：
- GPT-5.5：1.25/百万tokens（输入），10/百万tokens（输出）
- GPT-5-mini：0.50/百万tokens（输入），0.6/百万tokens（输出）
- 轻度使用：约 $20-50/月
Anthropic Claude API
# 1. 访问 https://console.anthropic.com
# 2. 注册账户（需要国外信用卡）
# 3. 申请API访问权限（通常1-3天）
# 4. 创建API Key
# 5. 配置环境变量
export ANTHROPIC_API_KEY="sk-ant-your-key-here"
# 6. 测试API连接
curl https://api.anthropic.com/v1/messages \
-H "x-api-key: $ANTHROPIC_API_KEY"
bash
成本预估：
- Claude Sonnet 4.5：3/百万tokens（输入），15/百万tokens（输出）
- Claude 3 Haiku：0.25/百万tokens（输入），1.25/百万tokens（输出）
- 轻度使用：约 $30-80/月
国内AI服务（推荐，访问稳定）
通义千问（阿里云）：
# 1. 访问 https://dashscope.aliyun.com
# 2. 登录阿里云账号（支付宝/淘宝）
# 3. 进入"创建API-KEY"页面
# 4. 创建API Key
# 5. 配置环境变量
export DASHSCOPE_API_KEY="sk-your-key-here"
# 6. 测试（使用DashScope SDK）
npm install -g @dashscope/sdk
bash
价格：
- qwen-turbo：¥0.8/百万tokens（输入），¥2/百万tokens（输出）
- qwen-plus：¥4/百万tokens（输入），¥12/百万tokens（输出）
- qwen-max：¥40/百万tokens（输入），¥120/百万tokens（输出）
- 新用户免费额度：通常100万tokens
文心一言（百度千帆）：
# 1. 访问 https://cloud.baidu.com/product/wenxinworkshop
# 2. 登录百度账号
# 3. 开通服务并创建API Key
# 4. 配置环境变量
export QIANFAN_ACCESS_KEY="your-access-key"
export QIANFAN_SECRET_KEY="your-secret-key"
bash
智谱GLM：
# 1. 访问 https://open.bigmodel.cn
# 2. 注册/登录账号
# 3. 创建API Key
# 4. 配置环境变量
export BIGMODEL_API_KEY="your-key-here"
bash
DeepSeek（强烈推荐，超低成本）：
# 1. 访问 https://platform.deepseek.com
# 2. 注册账号
# 3. 创建API Key
# 4. 配置环境变量
export DEEPSEEK_API_KEY="your-key-here"
# 5. 测试 API 连接
curl https://api.deepseek.com/v1/chat/completions \
-H "Authorization: Bearer $DEEPSEEK_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model": "deepseek-chat", "messages": [{"role": "user", "content": "Hello"}]}'
bash
价格（2026年）：
- DeepSeek V4-Flash：0.14/百万tokens（输入），0.28/百万tokens（输出）
- 性价比极高，成本仅为GPT-4的5-10%
- Chat 端（chat.deepseek.com）：完全免费
Kimi（月之暗面）：
# 1. 访问 https://platform.moonshot.cn
# 2. 注册/登录（支持手机号）
# 3. 进入控制台创建 API Key
# 4. 配置环境变量
export MOONSHOT_API_KEY="your-key-here"
# 5. 测试连接（Kimi兼容OpenAI接口格式）
curl https://api.moonshot.cn/v1/chat/completions \
-H "Authorization: Bearer $MOONSHOT_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model": "moonshot-v1-128k", "messages": [{"role": "user", "content": "Hello"}]}'
bash
Kimi 核心优势与适用场景：
- 超长上下文：moonshot-v1-128k 支持 128k tokens，可以放入整份技术文档/API规格
- 文件理解：直接上传 PDF、Word、代码文件进行问答
- 代码场景：适合"帮我读懂这份 100 页的技术规范文档，然后生成对应的 TypeScript 类型定义"
价格：
- moonshot-v1 系列已于2026年降价（2026-11 核实：9款模型调价，moonshot-v1-8k 输入由 ¥12/百万tokens 降至 ¥2/百万tokens，32k/128k 档同步下调，输出价以官网为准）
- 新用户赠送免费额度，轻度使用基本免费
豆包（字节跳动 / Ark）：
# 1. 访问 https://console.volcengine.com/ark
# 2. 开通火山引擎账号（可用字节系账号登录）
# 3. 在"模型广场"中开通 Doubao 模型
# 4. 配置环境变量
export ARK_API_KEY="your-ark-api-key"
# 5. 测试（豆包API兼容OpenAI格式）
curl https://ark.cn-beijing.volces.com/api/v3/chat/completions \
-H "Authorization: Bearer $ARK_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model": "doubao-pro-4k", "messages": [{"role": "user", "content": "Hello"}]}'
bash
豆包 适用场景：
- 日常对话：doubao.com 网页版或手机App，完全免费
- 语音交互：豆包App语音识别流畅，适合口述代码需求
- 图片理解：多模态能力强，可上传截图分析UI问题
价格：
- doubao-lite：¥0.0003/千tokens（极低成本）
- doubao-pro：¥0.0008/千tokens
- 新用户免费额度
MiniMax（海螺AI）：
# 1. 访问 https://api.minimax.chat
# 2. 注册并实名认证
# 3. 创建 Group ID 和 API Key
# 4. 配置环境变量
export MINIMAX_API_KEY="your-key-here"
export MINIMAX_GROUP_ID="your-group-id"
# 5. 测试
curl https://api.minimax.chat/v1/text/chatcompletion_v2 \
-H "Authorization: Bearer $MINIMAX_API_KEY" \
-H "Content-Type: application/json" \
-d '{"model": "abab6.5s-chat", "messages": [{"role": "user", "content": "Hello"}]}'
bash
MiniMax 适用场景：
- 超长上下文（最高 1M tokens）：大型代码库分析
- 语音合成（TTS）：给 AI 应用加语音输出
- 视频理解：多模态内容分析
讯飞星火（科大讯飞）：
# 1. 访问 https://console.xfyun.cn/services/iflyttts
# 2. 注册讯飞开放平台账号
# 3. 创建应用，获取 APPID / APIKey / APISecret
# 4. 配置环境变量
export SPARK_APPID="your-appid"
export SPARK_API_KEY="your-api-key"
export SPARK_API_SECRET="your-api-secret"
# 5. 使用 HTTP API（注意讯飞使用 WebSocket 协议）
# 参考文档：https://www.xfyun.cn/doc/spark/
bash
讯飞星火 适用场景：
- 语音识别 API：构建语音输入功能，准确率业界领先（中文尤其出色）
- 语音合成 API：AI 应用加上多种音色的语音输出
- 教育类应用：内置教育场景优化
- 注意：文字对话能力不如 DeepSeek，但语音相关能力是当之无愧的国内第一
更新 .env 模板（包含所有国内服务）：
# .env
# ──────────────────────────────────────────
# 国际 AI 服务（需要注意访问合规性）
# ──────────────────────────────────────────
OPENAI_API_KEY=sk-your-openai-key
ANTHROPIC_API_KEY=sk-ant-your-anthropic-key
# ──────────────────────────────────────────
# 国内 AI 服务（推荐，稳定可用）
# ──────────────────────────────────────────
# DeepSeek（性价比最高，首选）
DEEPSEEK_API_KEY=your-deepseek-key
# 通义千问/阿里云 DashScope
DASHSCOPE_API_KEY=sk-your-dashscope-key
# Kimi（月之暗面，长上下文场景）
MOONSHOT_API_KEY=your-moonshot-key
# 豆包（字节/火山引擎）
ARK_API_KEY=your-ark-api-key
# 文心一言（百度千帆）
QIANFAN_ACCESS_KEY=your-qianfan-key
QIANFAN_SECRET_KEY=your-qianfan-secret
# 智谱 GLM
BIGMODEL_API_KEY=your-bigmodel-key
# MiniMax（多模态场景）
MINIMAX_API_KEY=your-minimax-key
MINIMAX_GROUP_ID=your-group-id
# 讯飞星火（语音场景）
SPARK_APPID=your-spark-appid
SPARK_API_KEY=your-spark-api-key
SPARK_API_SECRET=your-spark-api-secret
# 腾讯混元
HUNYUAN_SECRET_ID=your-secret-id
HUNYUAN_SECRET_KEY=your-secret-key
ini
API 密钥安全管理（重要！）
核心原则：
- ✅ 永不提交API密钥到版本控制
- ✅ 使用.env文件存储密钥
- ✅ 将.env添加到.gitignore
- ✅ 定期轮换API密钥
- ✅ 使用最小权限原则
安全配置方法：
# 1. 创建.env文件（不要提交！）
cat > .env << EOF
# AI服务密钥（不要提交到Git！）
OPENAI_API_KEY=sk-your-key-here
ANTHROPIC_API_KEY=sk-ant-your-key-here
DASHSCOPE_API_KEY=sk-your-dashscope-key
EOF
# 2. 设置文件权限（仅所有者可读写）
chmod 600 .env
# 3. 确保.gitignore包含.env
echo ".env" >> .gitignore
# 4. 创建.env.example作为模板（可以提交）
cat > .env.example << EOF
# AI服务密钥（替换为你的密钥）
OPENAI_API_KEY=sk-your-openai-key
ANTHROPIC_API_KEY=sk-ant-your-anthropic-key
DASHSCOPE_API_KEY=sk-your-dashscope-key
EOF
# 5. 提交.env.example，不提交.env
git add .env.example .gitignore
git commit -m "chore: add environment variable template"
bash
生产环境最佳实践：
# 使用专业密钥管理服务
├── AWS Secrets Manager
├── Azure Key Vault
├── Google Secret Manager
└── HashiCorp Vault
# 或使用环境变量注入
export OPENAI_API_KEY=$(cat ~/.secrets/openai_key)
bash
移动端开发环境（可选）
模拟器配置
Android：
# 1. 安装Android Studio
# 下载：https://developer.android.com/studio
# 2. 安装Android SDK
# 在Android Studio中：Tools → SDK Manager
# 3. 创建虚拟设备
# Tools → AVD Manager → Create Virtual Device
# 4. 启动模拟器
emulator -avd <avd_name>
bash
iOS（仅Mac）：
# 1. 安装Xcode
# Mac App Store：搜索"Xcode"
# 2. 安装iOS模拟器
# Xcode → Preferences → Components
# 3. 启动模拟器
open -a Simulator
bash
Web（Chrome DevTools）：
1. 打开Chrome DevTools（F12）
2. 点击设备工具栏图标（Ctrl+Shift+M）
3. 选择设备类型或自定义尺寸
text
真机调试
Android：
# 1. 启用开发者选项
# 设置 → 关于手机 → 连续点击"版本号"7次
# 2. 启用USB调试
# 开发者选项 → USB调试
# 3. 连接设备并授权
# 通过USB连接，设备上授权调试
# 4. 验证连接
adb devices
bash
iOS：
# 需要Apple开发者账户（$99/年）
# 配置较为复杂，建议使用模拟器
bash
测试环境配置
自动化测试工具
# 1. 安装测试依赖
pnpm add -D vitest @vue/test-utils jsdom
pnpm add -D @testing-library/vue @testing-library/jest-dom
pnpm add -D playwright # E2E测试
# 2. 初始化Playwright（如需要）
pnpm exec playwright install
bash
Vitest配置（vitest.config.ts）：
import { defineConfig } from 'vitest/config'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
test: {
globals: true,
environment: 'jsdom',
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
exclude: [
'node_modules/',
'tests/',
'**/*.d.ts',
'**/*.config.*',
'**/mockData',
],
},
},
})
typescript
代码质量工具
# 1. 安装ESLint和Prettier
pnpm add -D eslint prettier
pnpm add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
pnpm add -D eslint-plugin-vue eslint-config-prettier
# 2. 初始化ESLint（可选）
pnpm exec eslint --init
bash
ESLint配置（.eslintrc.cjs）：
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:vue/vue3-recommended',
'prettier',
],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
parser: '@typescript-eslint/parser',
sourceType: 'module',
},
plugins: ['@typescript-eslint', 'vue'],
rules: {
'vue/multi-word-component-names': 'off',
'@typescript-eslint/no-explicit-any': 'warn',
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
},
}
javascript
Prettier配置（.prettierrc）：
{
"semi": false,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "es5",
"arrowParens": "always",
"endOfLine": "lf"
}
json
或使用Biome（新一代替代品，快30-100倍）：
# 安装Biome
pnpm add -D @biomejs/biome
# 初始化配置
npx @biomejs/biome init
# 使用Biome替代ESLint+Prettier
npx @biomejs/biome check src/
npx @biomejs/biome format src/
bash
性能监控工具
开发阶段工具
Vite Bundle Analyzer：
# 安装
pnpm add -D rollup-plugin-visualizer
# 配置（vite.config.ts）
import { visualizer } from 'rollup-plugin-visualizer'
export default {
plugins: [
visualizer({
open: true,
gzipSize: true,
brotliSize: true,
}),
],
}
bash
Vue DevTools：
- 浏览器插件安装（前文已述）
- 组件性能监控
- Vuex/Pinia状态管理调试
- 路由调试
Chrome Lighthouse：
# 安装
pnpm add -g lighthouse
# 运行
lighthouse https://your-site.com --view
bash
生产环境监控
Sentry（错误追踪）：
# 安装
pnpm add @sentry/vue
# 配置
import * as Sentry from '@sentry/vue'
Sentry.init({
app,
dsn: 'your-dsn-here',
environment: import.meta.env.MODE,
})
bash
Google Analytics：
# 安装
pnpm add vue-gtag
# 配置
import VueGtag from 'vue-gtag'
app.use(VueGtag, {
config: { id: 'G-XXXXXXXXXX' },
})
bash
Web Vitals（核心性能指标）：
# 安装
pnpm add web-vitals
# 使用
import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals'
getCLS(console.log)
getFID(console.log)
getFCP(console.log)
getLCP(console.log)
getTTFB(console.log)
bash
环境验证清单
完成环境配置后，请验证以下项目：
基础环境检查
# 1. 创建验证脚本
cat > check-env.sh << 'EOF'
#!/bin/bash
echo "🔍 检查基础环境..."
# Node.js版本
if command -v node &> /dev/null; then
NODE_VERSION=$(node -v)
echo "✅ Node.js: $NODE_VERSION"
if [[ "$NODE_VERSION" < "v24" ]]; then
echo "⚠️ 警告: 建议使用Node.js 24 LTS"
fi
else
echo "❌ Node.js未安装"
fi
# pnpm版本
if command -v pnpm &> /dev/null; then
echo "✅ pnpm: $(pnpm -v)"
else
echo "❌ pnpm未安装"
fi
# Git配置
if command -v git &> /dev/null; then
echo "✅ Git: $(git --version)"
if [ -n "$(git config --global user.name)" ]; then
echo "✅ Git用户名: $(git config --global user.name)"
else
echo "⚠️ 未配置Git用户名"
fi
else
echo "❌ Git未安装"
fi
echo ""
echo "🔍 检查编辑器..."
# Cursor
if command -v cursor &> /dev/null; then
echo "✅ Cursor已安装"
elif command -v code &> /dev/null; then
echo "✅ VS Code已安装"
else
echo "⚠️ 未找到Cursor或VS Code"
fi
echo ""
echo "🔍 检查环境变量..."
if [ -f .env ]; then
echo "✅ .env文件存在"
if grep -q "OPENAI_API_KEY=sk-" .env 2>/dev/null; then
echo "✅ OpenAI API Key已配置"
fi
if grep -q "ANTHROPIC_API_KEY=sk-ant-" .env 2>/dev/null; then
echo "✅ Anthropic API Key已配置"
fi
else
echo "⚠️ .env文件不存在"
fi
echo ""
echo "✨ 环境检查完成！"
EOF
chmod +x check-env.sh
./check-env.sh
bash
AI工具检查
测试AI工具是否正常工作：
# 测试Cursor AI
echo "请测试以下快捷键："
echo " Ctrl+K: 内联编辑"
echo " Ctrl+L: 聊天模式"
echo " Ctrl+I: Composer模式"
echo ""
echo "测试提示词："
echo " 请用TypeScript写一个Vue 3组件，包含计数器功能"
# 测试API连接
if [ -n "$OPENAI_API_KEY" ]; then
echo ""
echo "🔍 测试OpenAI API..."
curl https://api.openai.com/v1/models \
-H "Authorization: Bearer $OPENAI_API_KEY" \
-s | grep -q "object" && echo "✅ OpenAI API连接正常" || echo "❌ OpenAI API连接失败"
fi
bash
项目配置检查
# 验证项目初始化
echo "🔍 检查项目配置..."
[ -f package.json ] && echo "✅ package.json存在" || echo "❌ 缺少package.json"
[ -f .gitignore ] && echo "✅ .gitignore存在" || echo "❌ 缺少.gitignore"
[ -f .env ] && echo "✅ .env存在" || echo "⚠️ .env不存在（需要创建）"
[ -d .vscode ] && echo "✅ .vscode配置存在" || echo "⚠️ 编辑器配置不存在"
echo ""
echo "🔍 尝试安装依赖..."
if command -v pnpm &> /dev/null; then
pnpm install && echo "✅ 依赖安装成功" || echo "❌ 依赖安装失败"
fi
bash
网络和权限检查
# 测试网络连接
echo "🔍 测试网络连接..."
# 测试npm镜像
curl -s https://registry.npmmirror.com/react > /dev/null \
&& echo "✅ npm镜像连接正常" \
|| echo "⚠️ npm镜像连接失败"
# 测试OpenAI API（如果配置了密钥）
if [ -n "$OPENAI_API_KEY" ]; then
curl -s https://api.openai.com/v1/models \
-H "Authorization: Bearer $OPENAI_API_KEY" > /dev/null \
&& echo "✅ OpenAI API连接正常" \
|| echo "⚠️ OpenAI API连接失败（可能需要代理）"
fi
# 测试国内AI服务
if [ -n "$DASHSCOPE_API_KEY" ]; then
curl -s https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation \
-H "Authorization: Bearer $DASHSCOPE_API_KEY" > /dev/null \
&& echo "✅ 通义千问API连接正常" \
|| echo "⚠️ 通义千问API连接失败"
fi
bash
🆘 常见问题解决
Node.js版本问题
问题：版本冲突或需要切换版本
# 解决方案1：使用nvm（推荐）
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
# 重新加载配置
source ~/.bashrc # Linux
source ~/.zshrc # macOS
# 安装并使用Node.js 24
nvm install 24
nvm use 24
nvm alias default 24
# 解决方案2：使用n（macOS/Linux）
sudo npm install -g n
sudo n 24
# 解决方案3：使用fnm（更快的替代品）
curl -fsSL https://fnm.vercel.app/install | bash
fnm install 24
fnm use 24
fnm default 24
bash
问题：全局权限错误（macOS/Linux）
# 解决方案：修复npm权限
mkdir -p ~/.npm-global
npm config set prefix '~/.npm-global'
# 添加到PATH（添加到 ~/.bashrc 或 ~/.zshrc）
echo 'export PATH=~/.npm-global/bin:$PATH' >> ~/.zshrc
source ~/.zshrc
# 或使用nvm/n管理Node版本（推荐）
bash
pnpm安装失败
问题：安装命令报错
# 解决方案1：使用npm安装
npm install -g pnpm
# 解决方案2：使用Homebrew（macOS）
brew install pnpm
# 解决方案3：使用安装脚本
curl -fsSL https://get.pnpm.io/install.sh | sh -
# 解决方案4：使用corepack（Node.js 16.9+）
corepack enable
corepack prepare pnpm@latest --activate
bash
问题：pnpm store不可访问
# 配置国内镜像
pnpm config set registry https://registry.npmmirror.com
# 或设置临时环境变量
npm_config_registry=https://registry.npmmirror.com pnpm install
bash
AI功能无法使用
问题：Cursor AI无响应
# 检查项1：网络连接
ping api.anthropic.com
ping api.openai.com
# 检查项2：API密钥配置
# Cursor → Settings → AI Models → 检查配置
# 检查项3：代理设置
# 如果使用代理，配置：
export HTTP_PROXY=http://127.0.0.1:7890
export HTTPS_PROXY=http://127.0.0.1:7890
# 检查项4：账号状态
# 访问 https://cursor.sh 检查订阅状态
bash
问题：国内AI服务连接失败
# 通义千问
# 检查API Key是否正确
curl https://dashscope.aliyuncs.com/api/v1/services/aigc/text-generation/generation \
-H "Authorization: Bearer $DASHSCOPE_API_KEY"
# 文心一言
# 确保已开通千帆大模型平台
# 访问：https://cloud.baidu.com/product/wenxinworkshop
# 智谱GLM
# 检查API Key余额
# 访问：https://open.bigmodel.cn/console/usage
bash
编辑器插件问题
问题：插件安装失败或无法加载
# 解决方案1：检查编辑器版本
code --version # 或 cursor --version
# 确保是最新版本
# 解决方案2：手动安装插件
code --install-extension vue.volar
code --install-extension esbenp.prettier-vscode
# 解决方案3：清除编辑器缓存
# macOS
rm -rf ~/Library/Application\ Support/Code/Cache
rm -rf ~/Library/Application\ Support/Code/CachedData
# Cursor
rm -rf ~/Library/Application\ Support/Cursor/Cache
# 解决方案4：禁用其他插件（冲突排查）
# 临时禁用所有插件，逐个启用排查问题
bash
依赖安装问题
问题：node_modules安装失败
# 解决方案1：清除缓存
pnpm store prune
rm -rf node_modules
rm -rf ~/.pnpm-store
pnpm install
# 解决方案2：使用npm镜像
pnpm config set registry https://registry.npmmirror.com
pnpm install
# 解决方案3：降低node版本
# 如果使用最新Node版本有问题，尝试降级
nvm install 22
nvm use 22
pnpm install
# 解决方案4：忽略scripts
pnpm install --ignore-scripts
bash
Git提交问题
问题：pre-commit hook失败
# 临时跳过hooks
git commit --no-verify -m "message"
# 或永久禁用hooks（不推荐）
rm .git/hooks/
# 或修复hooks的问题
# 检查package.json中的scripts
bash
技术支持
如果在环境配置过程中遇到问题，可以通过以下方式寻求帮助：
官方渠道
- 课程社区：在课程讨论区提问
- 技术文档：查阅官方技术文档
- AI助手：直接询问AI助手（Cursor、通义灵码等）
自助搜索
- 搜索引擎：
- Google：google.com
- 百度：baidu.com
- 必应：bing.com
- 技术问答社区：
- Stack Overflow：stackoverflow.com
- 掘金：juejin.cn
- SegmentFault：segmentfault.com
- 官方社区：
- Vue.js论坛：forum.vuejs.org
- Vite讨论：github.com/vitejs/vite/discussions
- Node.js社区：github.com/nodejs/node/discussions
提问技巧
如何获得更好的帮助：
❌ 糟糕的提问：
"我的代码不工作了，怎么办？"
✅ 好的提问：
"我在使用Vue 3 + TypeScript开发时遇到了一个问题。
当我尝试使用Composition API的ref定义响应式数据时，
TypeScript报错：'TS2574: A function returning never must be return annotated'。
我的代码如下：
[粘贴代码]
环境信息：
- Node.js: v24.12.0
- Vue: 3.5.0
- TypeScript: 5.6.0
我尝试过的方法：
1. 重新安装依赖
2. 清除缓存
请问还有什么解决方案吗？"
text
提问清单：
- 详细描述问题
- 提供错误信息截图
- 粘贴相关代码
- 说明环境信息
- 列出已尝试的解决方案
恭喜！如果你已经完成了以上所有配置，那么你的开发环境已经准备就绪，可以开始精彩的AI前端开发之旅了！
↑